<template>
  <div>
    <div>
      <form action="" method="post" class="bootstrap-frm">
        <h1>留言板
          <span>请在下方填写信息并留言。 </span>
        </h1>
        <label>
          <span>姓名 : </span>
          <input id="name" type="text" name="name" placeholder="Your Full Name">
        </label>
        <label>
          <span>邮箱 :</span>
          <input id="email" type="email" name="email" placeholder="Valid Email Address">
        </label>
        <label>
          <span>主题 :</span>
          <select name="selection" required>
            <option selected hidden disabled value="">Please select one message subject.</option> // 展示的文字
            <option value="Job Inquiry">主题1</option>
            <option value="General Question">主题2</option>
          </select>
        </label>
        <label>
          <span>留言 :</span>
          <textarea id="message" name="message" placeholder="Your Message to Us" />
        </label>
        <label>
          <span>&nbsp;</span>
          <input type="button" class="button" value="提交">
        </label>
      </form>
    </div>
    <el-divider />
    <el-dialog
      title="具体信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{ dialogshow }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div style="margin: 20px 55px 10px ">
      <el-button @click="resetDateFilter">按日期查找</el-button>
      <el-button @click="clearFilter">按内容查找</el-button>
      <el-button @click="clearFilter">按学号查找</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="tableData"
      style="margin: 30px 55px; width: 90%"
    >
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      />
      <el-table-column
        prop="stu_id"
        label="学号"
        sortable
        width="180"
      />
      <el-table-column
        prop="message"
        label="留言"
        :formatter="formatter"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.message }}</span>
          <el-button type="text" size="small" @click="handleClick(scope.$index,scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="tag"
        label="状态"
        width="100"
        :filters="[{ text: '未读', value: '未读' }, { text: '已读', value: '已读' },{ text: '处理中', value: '处理中' },{ text: '已完成', value: '已完成' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="(scope.row.tag === '已读' || scope.row.tag === '已完成') ? 'success' : 'primary'"
            disable-transitions
          >{{ scope.row.tag }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogshow: '123',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1518 弄',
        tag: '未读'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1517 弄',
        tag: '已读'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1519 弄',
        tag: '处理中'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1516 弄',
        tag: '已完成'
      }]
    }
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.message
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleClick(index, row) {
      this.$data.dialogVisible = true
      this.$data.dialogshow = '你点击的是第' + index + '行  内容为'
      this.$data.dialogshow += row.message
      console.log(row)
    }
  }
}
</script>

<style scoped>
.bootstrap-frm {
  margin-left: 60px;
  max-width: 500px;
  background: #FFF ;
  padding: 20px 30px 20px 30px;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: black;
  text-shadow: 1px 1px 1px #FFF;
  /*border:1px solid #DDD;*/
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.bootstrap-frm h1 {
  font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0px 0px 10px 40px;
  display: block;
  /*border-bottom: 1px solid #DADADA;*/
  margin: -10px -30px 30px -30px;
  /*color: #888;*/
}
.bootstrap-frm h1>span {
  display: block;
  font-size: 11px;
}
.bootstrap-frm label {
  display: block;
  margin: 0px 0px 5px;
}
.bootstrap-frm label>span {
  float: left;
  width: 20%;
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{
  border: 1px solid #CCC;
  color: #888;
  height: 20px;
  line-height:15px;
  margin-bottom: 16px;
  margin-right: 6px;
  margin-top: 2px;
  outline: 0 none;
  padding: 5px 0px 5px 5px;
  width: 70%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.bootstrap-frm select {
  /*background: #FFF url('down-arrow.png') no-repeat right;*/
  background: #FFF url('down.png') no-repeat right;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  width: 70%;
  height: 35px;
  line-height:15px;
}
.bootstrap-frm textarea{
  height:100px;
  padding: 5px 0px 0px 5px;
  width: 70%;
}
.bootstrap-frm .button {
  background: #FFF;
  border: 1px solid #CCC;
  padding: 10px 25px 10px 25px;
  color: #333;
  border-radius: 4px;
  margin-bottom: -40px;
}
.bootstrap-frm .button:hover {
  color: #333;
  background-color: #EBEBEB;
  border-color: #ADADAD;
}
</style>
